import { Box, Chip, Stack, Typography } from "@mui/material";
import BaseCard from "components/BaseCard";
import BasicBreadcrumbs from "components/BasicBreadcrumbs";
import RouteLink from "components/RouteLink";

const PostContent = ({ data }) => {
  return (
    <BaseCard>
      {data?.forum && data.forum.title && (
        <BasicBreadcrumbs
          {...{
            links: [
              {
                href: "/",
                title: data.forum.category.name,
              },
            ],
            title: data.forum.title,
          }}
        />
      )}
      <Typography align="center" variant="h4" component="h2">
        {data.title}
      </Typography>
      <Box sx={{ width: 1, py: 1, display: "flex", justifyContent: "center" }}>
        <Stack direction="row" spacing={2}>
          {data?.tags &&
            data.tags.length > 0 &&
            data.tags.map((x) => (
              <RouteLink key={x.id} href={"/tag/" + x.name} title={x.name}>
                <Chip label={x.name} />
              </RouteLink>
            ))}
        </Stack>
      </Box>
      <Box
        sx={{
          p: 3,
          borderRadius: 2,
          my: 2,
        }}
        className="braft-output-content"
        dangerouslySetInnerHTML={{ __html: data.content }}
      ></Box>
    </BaseCard>
  );
};

export default PostContent;
